<template>
    <div class="bod">
       <ul class="list">
           <li><span>收货人<input type="text" v-model="userName"></span></li>
           <li><span>手机号码<input type="text" v-model="mobile"></span></li>
           <li><span style="float:left">所在地区</span>
                <div class="region_dingwei" style="width:250px;float:left" @click="region" >
                    <span>{{sheng}}</span>
                    <span>{{shi}}</span>
                    <span>{{qu}}</span>
                </div>
                <img class="biao" src="../../../assets/personal/images/694485431459622997.png">
            </li>
           <li><span class="lastspan">详细地址:</span><textarea placeholder="详细地址：如道路、门牌号、小区、楼栋号、单元室等" v-model="addres" class="text_al" name="txt" clos=",10" rows="3" warp="virtual" ></textarea></li>
           <li class="shezhi">设置默认地址 <div class="chakd" :class="{active:0==addressType}" @click="addressType_sub"></div></li>
           <li class="shezhi" style="color:red;" v-show="addID" @click="deletears">删除收货地址 </li>
           <div class="clearfix"></div>
       </ul>
       <div class="footer" @click="submet">
             保存
       </div>
        <div class="region" v-show="region_f">
            <div class="area_ctr">
                <div class="area_btn_box">
                    <div class="area_btn larea_cancel" @click="cancel">取消</div>
                    <div class="area_btn larea_finish" @click="finish">确定</div>
                </div>
                <div class="">
                    <div class="area_roll">
                        <div class="tooth_new">
                            <!--省-->
                            <div class="tooth" v-for="item in districts_list_province" :v-model="sheng" :key="item.id" @click="IdClick(item.id,item.name)" :class="{red:item.id==provinceID}">
                                {{item.name}}
                            </div>
                        </div>
                        <div>
                            <div class="tooth" v-for="item in districts_list_city" :key="item.id" @click="IdClickprovince(item.id,item.name)" :class="{red:item.id==cityID}">
                                {{item.name}}
                            </div>
                        </div><!--市-->
                        <div>
                            <div class="tooth" v-for="item in districts_list_area" :key="item.id" @click="IdClickarea(item.id,item.name)" :class="{red:item.id==areaID}">
                                {{item.name}}
                            </div>
                        </div><!--区-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
          region_f: false,     //地区三级联动变量
          districts_list_province: [],  //省
          districts_list_city: [],  //市The city
          districts_list_area: [],   //区
          provinceID: '',   //省ID
          cityID: '',     //市ID
          areaID: '',//区ID
          tur: false,
          sheng: '',  //省
          shi: '',  //市
          qu: '',    //区
          userName:'',
          mobile:'',
          addres:'',
          addressType:1,
          districtId:'',
          addID:this.$route.query.addID,
          Address_list:[]
        }
    }
    ,
    mounted(){
       this.districts();
       this.Address()
    },
    methods:{
       districts() {
                this.$http.get(this.APIURL_PREFIX + '/api/wap/districts', { params: { parentid: 0 } }).then((response) => {
                    this.districts_list_province = response.data.data;
                }).catch(function (err) {
                    console.log(err)
                });
      },
      finish: function () {
                if (this.sheng == '') {
                   layer.msg("请选择地区")
                } else {
                    if (this.sheng == "" || this.shi == '') {
                        layer.msg("对不起请选择详细地区")
                    } else {
                        if (this.qu == "") {
                            this.districtId = this.cityID;
                            console.log(this.districtId)
                            this.region_f = !this.region_f;
                        } else {
                            this.districtId = this.areaID;
                            console.log(this.districtId)
                            this.region_f = !this.region_f;
                        }
                    }
                }
            },
            clearid() {
                this.provinceID = "",
                this.cityID = "",
                this.areaID = '',
                this.sheng = '',
                this.shi = ''
                this.qu = ''
                this.districtId = ''
                this.districts_list_city = []
                this.districts_list_area = []
            },
            cancel: function () {//取消
                this.region_f = !this.region_f
                this.clearid()
            },
            region: function () {//弹出
                this.region_f = !this.region_f
                this.clearid()
            },
            IdClick: function (id, name) {//点击的时候省
                this.provinceID = id;
                this.districts_list_city = []
                this.districts_list_area = []
                this.$http.get(this.APIURL_PREFIX + '/api/wap/districts', { params: { parentid: id } }).then((response) => {
                    this.districts_list_city = response.data.data;
                }).catch(function (err) {
                    console.log(err)
                });
                this.sheng = name;
                console.log(this.sheng)
            },
            IdClickprovince: function (id, name) {//点击市
                this.cityID = id

                this.$http.get(this.APIURL_PREFIX + '/api/wap/districts', { params: { parentid: id } }).then((response) => {
                    this.districts_list_area = response.data.data;
                }).catch(function (err) {
                    console.log(err)
                });
                this.shi = name;
                console.log(this.shi)
            },
            IdClickarea: function (id, name) { //区点击
                this.areaID = id
                this.qu = name;
                console.log(this.qu+"+++1")
            },
        addressType_sub:function(){
             if(1==this.addressType){
                 this.addressType=0
             }else{
                 this.addressType=1
             }
        },
        Address(){
          if(this.addID){
              this.$http.get(this.APIURL_PREFIX + '/api/wap/receivingAddressById',{ params: {id:this.addID} }).then((response) => {
                this.Address_list=response.data.data
                this.userName=this.Address_list.userName
                this.mobile=this.Address_list.mobile
                this.sheng=this.Address_list.province
                this.shi=this.Address_list.city
                this.qu=this.Address_list.district
                this.districtId=this.Address_list.districtId
                this.addres=this.Address_list.address
            }).catch(function (err) {
                console.log(err)
            });
          }else{
             
          }
           
        },
        submet:function(){ 
            var re = /^1\d{10}$/;  //手机号正则
                if(""==this.userName){
                    layer.msg("对不起收货人不能为空")
                    return;
                }
                if(""==this.mobile || re.test(this.mobile) == false){
                   layer.msg("对不起收货人电话不能为空/或格式不正确")
                    return;
                }
                if(""==this.addres){
                    layer.msg("对不起收货人地址不能为空")
                    return;
                }
                if(""==this. districtId){
                   layer.msg("对不起地区不能为空")
                    return;
                }
            if(this.addID){
                 this.$http.put(this.APIURL_PREFIX+'/api/wap/receivingAddress',$.param({id:this.addID,addressType:this.addressType,province:this.sheng,city:this.shi,district:this.qu,districtId:this.districtId,address:this.addres,userName:this.userName,mobile:this.mobile})).then((response) => {
                  layer.msg("修改成功")
                   this.$router.push({name:'addaddress'})
                 }).catch(function(err){
                console.log(err)
              });
            }else{
               console.log(this.userName)
                console.log(this.mobile)
                console.log(this.addres)
               
                this.$http.post(this.APIURL_PREFIX+"/api/wap/receivingAddress", $.param({addressType:this.addressType,province:this.sheng,city:this.shi,district:this.qu,districtId:this.districtId,address:this.addres,userName:this.userName,mobile:this.mobile})).then((response) => { 
                   layer.msg('添加成功')
                    this.$router.push({name:'addaddress'})
                }).catch(function(err){
                        console.log(err)
                })
            }
        },
        deletears(){
            let vm=this;
            layer.confirm("确定删除该收获地址？", {
                btn : [ '确定', '取消' ]//按钮
            }, 
            function() {
                vm.$http.delete(vm.APIURL_PREFIX+'/api/wap/receivingAddress/'+vm.addID).then((response) => {
                    layer.msg("删除成功")
                    vm.$router.push({name:'addaddress'})
                }).catch(function(err){
                     console.log(err)
                });
            }); 
        }
        ///////////////////////////////////////////////////////////////////////////////////////////////////////////#endregion
        , 
   }
}
</script>

<style scoped>
.bod{
    width: 100%;
    height: 100%;
}
.list li{
    line-height: 44px;
    text-align: left;
    border-bottom: 1px solid #e5e5e5;
    background: white;
}
.list li span{
   margin-left: 15px;
}
.list li input{
    width: 240px;
    margin-left: 10px;
    background: none;
    border: none;
}
.text_al{
    width:280px;
    border: none;
    background: none;
    font-size: 14px;
}
.lastspan{
   float: left;
}
.biao{
    vertical-align: middle;
    float:right;
    margin-top: 10px;
    margin-right: 10px;
}
.shezhi{
    margin-top:10px;padding-left:10px;
}
.active{
    width: 20px;
    height: 20px;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    border-radius: 50%;
    background: url("../../../assets/personal/images/bsgg.png") no-repeat no-repeat !important;
    background-size: 100% 100% !important;
}
.chakd{
    width: 20px;
    height: 20px;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    border-radius: 50%;
    background: url("../../../assets/personal/images/checkbox-active.png") no-repeat no-repeat;
    background-size: 100% 100%;
}

.clearfix{
    clear: both;
}
.footer{
    position: fixed;
    bottom:0px;
    height: 60px;
    width: 100%;
    background: red;
    line-height: 60px;
    font-weight: 400;
    color: white;
}
.region {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9900;
    overflow: hidden;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.area_ctr {
    vertical-align: middle;
    background-color: #d5d8df;
    color: #000;
    margin: 0;
    height: auto;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9901;
    overflow: hidden;
}

.area_btn_box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    background-color: #f1f2f4;
    position: relative;
}

.area_btn {
    color: #0575f2;
    font-size: 1.6em;
    line-height: 1em;
    text-align: center;
    padding: .8em 1em;
}

.area_roll {
    display: flex;
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: transparent;
}

    .area_roll > div {
        font-size: 1.6em;
        height: 10em;
        float: left;
        background-color: transparent;
        position: relative;
        overflow: scroll;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

.area_grid {
    position: relative;
    top: 4em;
    width: 100%;
    height: 2em;
    margin: 0;
    box-sizing: border-box;
    z-index: 0;
    border-top: 1px solid #abaeb5;
    border-bottom: 1px solid #abaeb5;
}

.tooth {
    height: 2em;
    line-height: 2em;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
}

</style>
